﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model MenuDetailOutput
@section css{
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        .layui-form-item .layui-input {
            width: 350px;
        }

        .layui-iconpicker {
            max-width: 100%;
        }

        .layui-form-select {
            width: 350px;
        }

        .layui-iconpicker-body.layui-iconpicker-body-page .hide {
            display: none;
        }
    </style>
}
<form class="layui-form" action="" lay-filter="menu-edit">
    <div class="layuimini-container layuimini-page-anim">
        <div class="layuimini-main">
            <div class="layui-form layuimini-form">
                @if (Model.MenuOutput.Id > 0)
                {
                    <div class="layui-form-item">
                        <label class="layui-form-label">编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" lay-verify="id" value="@Model.MenuOutput.Id" disabled class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">添加时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="createTime" value="@Model.MenuOutput.CreateTime.ToWebString()" readonly class="layui-input">
                        </div>
                    </div>
                }
                <div class="layui-form-item">
                    <label class="layui-form-label required">所属父级</label>
                    <div class="layui-input-block">
                        <select name="parentId" id="parentId" lay-verify="parentId" lay-filter="parentId">
                            <option value="0">请选择父级菜单</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">菜单名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" lay-reqtext="菜单名不能为空" placeholder="请输入菜单名" class="layui-input" value="@Model.MenuOutput.Name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">权限码</label>
                    <div class="layui-input-block">
                        <input type="text" name="nameCode" lay-verify="required" lay-reqtext="权限码不能为空" placeholder="请输入权限码" class="layui-input" value="@Model.MenuOutput.NameCode">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">图标</label>
                    <div class="layui-input-block">
                        <input type="text" id="iconPicker" lay-filter="iconPicker" class="hide" value="@Model.MenuOutput.Icon">
                        <input type="hidden" name="icon" id="Icon" value="@Model.MenuOutput.Icon" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">Url</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" @*lay-verify="required" lay-reqtext="url不能为空"*@ placeholder="请输入url" class="layui-input" value="@Model.MenuOutput.Url">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">httpMethod</label>
                    <div class="layui-input-block">
                        <select name="httpMethod" lay-filter="aihao" value="@Model.MenuOutput.HttpMethod">
                            <option value="get">get</option>
                            <option value="delete">delete</option>
                            <option value="put">put</option>
                            <option value="post">post</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">排序</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" lay-verify="required" lay-reqtext="排序不能为空" placeholder="请输入排序号" class="layui-input" value="@Model.MenuOutput.Sort">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">是否启用</label>
                    <div class="layui-input-block">
                        @if (Model.MenuOutput.Status)
                        {
                            <input type="checkbox" checked name="status" value="true" lay-skin="switch">
                        }
                        else
                        {
                            <input type="checkbox" name="status" value="true" lay-skin="switch">
                        }
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">按钮分配</label>

                    <div class="layui-input-block" id="view">
                        @if (Model.ConfigOutputs != null)
                        {
                            foreach (var item in Model.ConfigOutputs)
                            {
                                @if (Model.MenuOutput.BtnCodeIds != null && Model.MenuOutput.BtnCodeIds.Length > 0)
                                {
                                    string flag = "";
                                    for (int i = 0; i < Model.MenuOutput.BtnCodeIds.Length; i++)
                                    {
                                        if (string.IsNullOrEmpty(Model.MenuOutput.BtnCodeIds[i]))
                                        {
                                            continue;
                                        }
                                        var id = Convert.ToInt32(Model.MenuOutput.BtnCodeIds[i]);
                                        if (item.Id == id)
                                        {
                                            flag = "checked";
                                        }
                                    }
                                    <input type="checkbox" name="@item.Id" @flag value="@item.Id" title="@item.Name" lay-skin="primary" lay-filter="cbk">
                                }
                                else
                                {
                                    <input type="checkbox" name="@item.Id" value="@item.Id" title="@item.Name" lay-skin="primary" lay-filter="cbk">
                                }
                            }
                        }
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn" style="">确认保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@section js{
    <script>
        layui.use(['form', 'iconPickerFa',  'common'], function () {
            var form = layui.form,
                     $ = layui.$,
                    layer = layui.layer,
                apiUtil = layui.common,
                iconPickerFa = layui.iconPickerFa;

            iconPickerFa.render({
                // 选择器，推荐使用input
                elem: '#iconPicker',
                // fa 图标接口
                url: "/lib/font-awesome-4.7.0/less/variables.less",
                // 是否开启搜索：true/false，默认true
                search: true,
                // 是否开启分页：true/false，默认true
                page: true,
                // 每页显示数量，默认12
                limit: 12,
                // 点击回调
                click: function (data) {
                   // console.log(data);
                    $("#Icon").val(data.icon);
                },
                // 渲染成功后的回调
                success: function (d) {
                  //  console.log(d);

                }
            });

                /**
                 * 初始化表单，要加上，不然刷新部分组件可能会不加载
                 */
                // 当前弹出层，防止ID被覆盖
            var index = parent.layer.getFrameIndex(window.name);
            var checkList = []; var id = @Model.MenuOutput.Id;
            if (id> 0)
            {
                apiUtil.BindParentMenu(@Model.MenuOutput.ParentId);
                //将已经存在的按钮集合赋值
                var jsonStr = '@Html.Raw(ViewBag.AlreadyBtns)';
                if (jsonStr != null) {
                    var arry = jsonStr.split(',');
                    for (var i = 0; i < arry.length; i++) {
                        checkList.push(arry[i])
                    }
                }
                //console.log("checkList", checkList);
            }
           else {
                apiUtil.BindParentMenu();
           }
            form.render();
            //拿到选中的所有checkbox
            form.on('checkbox(cbk)', function (data) {
                console.log("value:" + data.value);
                if (data.elem.checked) {
                    checkList.push(data.value);
                } else {
                    var index = checkList.findIndex(item => {
                        if (item == data.value) {
                            return true
                        }
                    })
                    checkList.splice(index, 1);
                }
            });
            if (checkList.length > 0 && checkList != null) {
                //移除数组里面的空字符
                let newArr = checkList.filter(i => i && i.trim());
                checkList = newArr;
                }
                //监听提交
                form.on('submit(saveBtn)', function (data) {
                    if (data.field.id > 0) {
                        data.field.btnCodeIds = checkList;
                        //layuimini bug
                        data.field.icon = "fa " + data.field.icon;
                        apiUtil.ajax('menu/modify', data.field, "application/json", "put", function (res) {
                           // console.log("msg:" + res.msg);
                            if (res.statusCode == 200 && res.success == true) {
                                layer.msg(res.msg);
                                parent.layer.close(index);
                            } else {
                                layer.msg(res.msg);
                            }
                        });
                    } else {
                        data.field.btnCodeIds = checkList;
                        //layuimini bug
                        data.field.icon = "fa " + data.field.icon;
                        apiUtil.ajax('menu/add', data.field, "application/json", "post", function (res) {
                            if (res.statusCode == 200 && res.success == true) {
                                layer.msg(res.msg);
                                parent.layer.close(index);
                            } else {
                                layer.msg(res.msg);
                            }
                        });
                    }
                    return false;
                });       
    });

    </script>
}